<template>
	<view class="confirm-page">
		<!-- 收货地址 -->
		<view class="address-section" @tap="chooseAddress">
			<view v-if="address" class="address-info">
				<view class="user-info">
					<text class="name">{{ address.name }}</text>
					<text class="phone">{{ address.phone }}</text>
				</view>
				<view class="address-detail">{{ address.province }}{{ address.city }}{{ address.detail }}</view>
			</view>
			<view v-else class="no-address">
				<text>请选择收货地址</text>
			</view>
			<text class="arrow">></text>
		</view>

		<!-- 商品信息 -->
		<view class="goods-section">
			<view class="goods-item" v-for="(item, index) in orderGoods" :key="index">
				<image :src="item.image" mode="aspectFill" class="goods-img"></image>
				<view class="goods-info">
					<text class="goods-name">{{ item.name }}</text>
					<text class="goods-spec">{{ item.spec }}</text>
					<view class="price-count">
						<text class="price">¥{{ item.price }}</text>
						<text class="count">x{{ item.count }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 支付方式 -->
		<view class="pay-section">
			<view class="section-title">支付方式</view>
			<view class="pay-item" v-for="(item, index) in payMethods" :key="index" @tap="selectPayMethod(index)">
				<view class="left">
					<text class="icon">{{ item.icon }}</text>
					<text class="name">{{ item.name }}</text>
				</view>
				<radio :checked="currentPayMethod === index" color="#1890ff" />
			</view>
		</view>

		<!-- 订单信息 -->
		<view class="order-info">
			<view class="info-item">
				<text>商品总价</text>
				<text>¥{{ totalPrice }}</text>
			</view>
			<view class="info-item">
				<text>运费</text>
				<text>¥{{ shipping }}</text>
			</view>
		</view>

		<!-- 底部提交栏 -->
		<view class="submit-bar">
			<view class="total">
				<text>合计：</text>
				<text class="price">¥{{ finalPrice }}</text>
			</view>
			<view class="submit-btn" @tap="submitOrder">提交订单</view>
		</view>
	</view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

// 模拟地址数据
const address = ref({
	name: '张三',
	phone: '13800138000',
	province: '广东省',
	city: '深圳市',
	detail: '南山区科技园南路123号'
})

// 替换之前的 orderGoods 静态数据
const orderGoods = ref([])

// uniapp的生命周期
onMounted(() => {
	const checkoutItems = uni.getStorageSync('checkoutItems')
	if (checkoutItems) {
		orderGoods.value = JSON.parse(checkoutItems)
	}
	
	// 清除本地存储的数据
	uni.removeStorageSync('checkoutItems')
})

// 支付方式
const payMethods = ref([
	{ name: '微信支付', icon: '💳' },
	{ name: '支付宝', icon: '💰' },
	{ name: '银行卡', icon: '🏦' }
])

const currentPayMethod = ref(0)

// 计算商品总价
const totalPrice = computed(() => {
	return orderGoods.value.reduce((total, item) => {
		return total + item.price * item.count
	}, 0)
})

// 运费
const shipping = ref(10)

// 最终价格
const finalPrice = computed(() => {
	return totalPrice.value + shipping.value
})

// 选择地址
const chooseAddress = () => {
	uni.navigateTo({
		url: '/pages/address/list'
	})
}

// 选择支付方式
const selectPayMethod = (index) => {
	currentPayMethod.value = index
}

// 提交订单
const submitOrder = () => {
	if (!address.value) {
		uni.showToast({
			title: '请选择收货地址',
			icon: 'none'
		})
		return
	}

	uni.showLoading({
		title: '提交中...'
	})

	// 模拟提交订单
	setTimeout(() => {
		uni.hideLoading()
		
		// 跳转到订单成功页面
		uni.redirectTo({
			url: `/pages/order/success?amount=${finalPrice.value}&payMethod=${payMethods.value[currentPayMethod.value].name}`
		})
	}, 1000)
}
</script>

<style>
.confirm-page {
	min-height: 100vh;
	background: #f5f5f5;
	padding-bottom: 120rpx;
}

.address-section {
	background: #fff;
	padding: 30rpx;
	margin-bottom: 20rpx;
	display: flex;
	align-items: center;
}

.address-info {
	flex: 1;
}

.user-info {
	margin-bottom: 10rpx;
}

.name {
	margin-right: 20rpx;
	font-weight: bold;
}

.phone {
	color: #666;
}

.address-detail {
	color: #333;
	font-size: 28rpx;
}

.no-address {
	color: #999;
}

.arrow {
	color: #ccc;
	margin-left: 20rpx;
}

.goods-section {
	background: #fff;
	padding: 20rpx;
	margin-bottom: 20rpx;
}

.goods-item {
	display: flex;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #eee;
}

.goods-item:last-child {
	border-bottom: none;
}

.goods-img {
	width: 160rpx;
	height: 160rpx;
	margin-right: 20rpx;
	border-radius: 8rpx;
}

.goods-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.goods-name {
	font-size: 28rpx;
	color: #333;
}

.goods-spec {
	font-size: 24rpx;
	color: #999;
}

.price-count {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.price {
	color: #ff4400;
	font-weight: bold;
}

.count {
	color: #999;
}

.pay-section {
	background: #fff;
	padding: 20rpx;
	margin-bottom: 20rpx;
}

.section-title {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 20rpx;
}

.pay-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 0;
}

.left {
	display: flex;
	align-items: center;
}

.icon {
	margin-right: 10rpx;
	font-size: 40rpx;
}

.order-info {
	background: #fff;
	padding: 20rpx;
}

.info-item {
	display: flex;
	justify-content: space-between;
	padding: 10rpx 0;
	font-size: 28rpx;
	color: #333;
}

.submit-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100rpx;
	background: #fff;
	display: flex;
	align-items: center;
	padding: 0 30rpx;
	box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05);
}

.total {
	flex: 1;
}

.total .price {
	color: #ff4400;
	font-weight: bold;
	font-size: 32rpx;
}

.submit-btn {
	width: 240rpx;
	height: 80rpx;
	background: #1890ff;
	color: #fff;
	text-align: center;
	line-height: 80rpx;
	border-radius: 40rpx;
}
</style>
